.container {
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 子元素之间的间隔均匀分配 */
    padding: 10px; /* 内边距 */
}
/* 子元素样式 */
.item {
    padding: 20px; /* 内边距 */
    color: white; /* 字体颜色 */
}
.item1 {
    background-color: #4CAF50; /* 第一项背景色 */
    flex: 2; /* 占2份宽度 */
}
.item2 {
    background-color: #2196F3; /* 第二项背景色 */
    flex: 2; /* 占1份宽度 */
}
.item3 {
    background-color: #FF5722; /* 第三项背景色 */
    flex: 2; /* 占3份宽度 */
}

.overlay {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定定位 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 半透明背景 */
    justify-content: center; /* 居中对齐 */
    align-items: center; /* 垂直居中 */
}

/* 弹窗样式 */
.modal {
    background-color: white; /* 白色背景 */
    padding: 20px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 阴影效果 */
}

/* 关闭按钮样式 */
.close-btn {
    cursor: pointer; /* 鼠标悬停变成手形 */
    color: #ff0000; /* 红色 */
    font-size: 24px; /* 字体大小 */
    font-weight: bold; /* 加粗 */
    /* position: absolute; 绝对定位 */
    top: 10px; /* 顶部距离 */
    right: 10px; /* 右侧距离 */
    border: orchid; /* 边框 */
    border-radius: 50%; /* 圆角 */
    padding: 5px; /* 内边距 */
    background-color: white; /* 背景色 */
}

h1 {
    font-size: 36px; /* 字体大小 */
    font-weight: bold; /* 加粗 */
    margin-top: 20px; /* 顶部间距 */
    color: #66ccff; /* 蓝色 */
    margin-bottom: 20px; /* 底部间距 */
}
#openModal{
    margin-top: 20px; /* 顶部间距 */
    background-color: #4CAF50; /* 蓝色 */
    color: rgb(221, 149, 149); /* 字体颜色 */
    padding: 10px 20px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    cursor: pointer; /* 鼠标悬停变成手形 */
}